<template>
  <div class="menuVertical">
    <template v-for="(item,index) in routers">
      <menu-sub-item
          v-if="item.visible"
          :key="index"
          :is-active="item.path === $route.path"
          :icon="item.icon"
          :title="item.name"
          @click="itemClick(item,index)"
      />
    </template>
  </div>
</template>

<script lang="ts">
import {Component, Vue,} from 'vue-property-decorator';
import MenuSubItem from "@/components/MenuSubItem.vue";
import {homeRoutes} from "@/router/homeRouter";
@Component({
  components: {MenuSubItem}
})
export default class MenuVertical extends Vue {
  routers = []
  itemClick(item:any,index:number){
    this.$router.push(item.path)
  }
  mounted(){
    let map: any = homeRoutes.find(item=>item.path === this.$route.matched[0].path)
    this.routers = map.children
  }
}
</script>
<style lang="scss" scoped>
.menuVertical{
  height: 100%;
  width: 100%;
  background: url("../assets/image/nav-bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
</style>
